<!DOCTYPE html>
<head>
<script src="../../../resources/js-test.js"></script>
<style id="s1">span { color: red}</style>
<style id="s2">span { color: red}</style>

<style>
  div { width: 100px }
  .class { width: 200px }
</style>
</head>
<body>
<div id="target">
<div id="other">
</div>

<script>
description("Test that adding a class then synchronously adding a style sheet produces correct styles. See also crbug.com/346873");

var target = document.getElementById("target");
target.offsetHeight;

// Set the class, which should schedule an async style recalc to change width to 200px.
target.className = 'class';

var styleElement = document.createElement("style");
styleElement.textContent = '#useless {width: 300px}';
// Insert before style sheet s2 in order to trigger style resolver reconstruction.
document.getElementById('s2').insertBefore(styleElement, null);

shouldBe("getComputedStyle(target).width", '"200px"');

</script>
